<script lang="ts" setup>
import { HttpStatusCode } from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { changeContractsStatus, delContracts, manyDelContracts } from '../../../../api/contracts'

const emits = defineEmits(['increase', 'updateData'])
const props = defineProps<{
  dataList: ListContracts[],
  loading: boolean
}>()
let ids = reactive<string[]>([])

const handleSelectionChange = (val: ListContracts[]) => {
  ids = val.map(item => {
    return item.id
  })
}
const delMany = () => {
  openDelConfirm(ids)
}
defineExpose({ delMany })
const openDelConfirm = (id: string | string[]) => {
  ElMessageBox.confirm(
      '您确定要删除此记录吗?',
      '删除委托',
      {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    delService(id)
  })
}
const delService = async (id: string | string[]) => {
  let res: Result<string>
  if(typeof id !== 'string') {
    if(id.length === 0) return
    res = await manyDelContracts(id.join(","))
  } else {
    res = await delContracts(id)
  }
  if(res.statusCode === HttpStatusCode.Created || res.statusCode === HttpStatusCode.Ok) {
    ElMessage({
      message: res.data as string,
      type: 'success'
    })
    emits('increase', 1, '')
  } else {
    ElMessage({
      message: '删除失败',
      type: 'error'
    })
  }
}
const changeStatus = (id: string, status: boolean) => {
  ElMessageBox.confirm(
      '您确定要修改此状态吗?',
      '分配委托',
      {
        confirmButtonText: '确认修改',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    let data = {
      status: !status
    }
    const res = await changeContractsStatus(id, data)
    if(res.statusCode === HttpStatusCode.Created || HttpStatusCode.Ok) {
      ElMessage({
        message: res.data as string,
        type: 'success'
      })
      emits('increase', 1, '')
    }
  })
}
</script>

<template>
  <el-table
      border
      stripe
      v-model:data="props.dataList"
      table-layout="auto"
      v-loading="loading"
      style="width: 100%"
      height="500px"
      @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="30" fixed />
    <el-table-column
        prop="person_name"
        label="姓名"
        align="center"
        width="160"
    />
    <el-table-column
        prop="person_phone"
        label="电话号码"
        align="center"
        width="200"
    />
    <el-table-column
        prop="contracts_type"
        label="租房类型"
        align="center"
        width="200"
    />
    <el-table-column
        prop="rent_out_type"
        label="出租类型"
        align="center"
        width="200"
    />
    <el-table-column
        label="预算"
        align="center"
        width="200"
    >
      <template #default="scope">
        {{ scope.row.contracts_budget + '/月' }}
      </template>
    </el-table-column>
    <el-table-column
        label="租金"
        align="center"
        width="200"
    >
      <template #default="scope">
        {{ scope.row.rent + '/月' }}
      </template>
    </el-table-column>
    <el-table-column
        prop="house_type"
        label="户型"
        align="center"
        width="160"
    />
    <el-table-column
        prop="house_region"
        label="区域"
        align="center"
        width="160"
    />
    <el-table-column
        show-overflow-tooltip
        prop="contracts_content"
        label="要求"
        align="center"
    />
    <el-table-column
        label="提交时间"
        align="center"
        width="200"
    >
      <template #default="scope">
        {{ new Date(scope.row.createdAt).toLocaleString() }}
      </template>
    </el-table-column>
    <el-table-column
        prop="description"
        label="操作"
        align="center"
        fixed="right"
        width="220"
    >
      <template #default="scope">
        <span class="change_btn" @click="changeStatus(scope.row.id, scope.row.status)">{{scope.row.status ? '已分配' : '未分配'}}</span>
        <span class="del_btn" @click="openDelConfirm(scope.row.id)">删除</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<style lang="less" scoped>
.change_btn {
  color: #6e6efd;
  cursor: pointer;
}
.del_btn {
  color: red;
  cursor: pointer;
  margin-left: 20px;
}
</style>
